
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>所有课程</title>
	<style>
		.course_table{
			width:800px;
			text-align: center;
			margin: 0 auto;
			border: black solid 1px;
			border-collapse:collapse;
		}
		.course_table tr th,.course_table tr td{
			border: black solid 1px;
		}
		.query{
			width: 500px;
			height: 100px;
			margin:0 auto;
		}
		.input{
			margin: 30px;
		}
		#btn{
			margin: 30px;
		}
		.normal_btn{
			float: left;
			margin: 13px 0px 0px 460px;
			height: 42px;
			width: 100px;
			border: none;
			font-weight: bold;
			background-color: #ff812b;
			text-align: center;
			color: #fff;
			font-size: 20px;
			font-family: "Microsoft YaHei";
			cursor: pointer;
		}
		.table_in_input{
			display: block;
			width: 80px;
			text-align: center;
		}
		.display_none{
			display: none;
		}
		.display_block{
			display: block;
		}
		.btn_container{
			width: 566px;
			height: 60px;
			margin:0 auto;
		}
</style>

</head>
<body>
	<!-- <form action="/webstuinfo/LoginServlet" method="GET" class="query">
		<input type="text" name="condition" class="input" id="input">
		<button id="btn">查询</button>
	</form> -->

	<div  class="query">
		<span>请输入查询条件</span><input type="text"  name="condition" 
		class="input" id="input" placeholder="请输入查询条件" size="23">
		<button id="btn">查询</button>
	</div>
	<div class="btn_container">
		<button id="delete_btn" class="normal_btn">删除</button>
	</div>
	<table class="course_table">
		<tr>
			<th>课程编号</th>
			<th>课程名称</th>
			<th width="120px">任教老师</th>
			<th>学分</th>
			<th>总课时</th>
			<th>专业</th>
			<th width="60px">最大选课人数</th>
			<th>教师号</th>
			<th>专业号</th>
			<th>选择</th>
		</tr>

		<c:forEach var="i" items="${requestScope.datas}" varStatus="outStatus">
			<tr row="${outStatus.index}" class="symbol">
				<c:forEach var="j" items="${i}" varStatus="status">
					<c:choose>
						<c:when test="${status.index eq 2}">
							<td>
								<select>
									<c:forEach var="student" items="${requestScope.teachers}">
										<c:choose>
											<c:when test="${student.tname==j}">
												<option selected value="${student}" tid="${student.tid}">${student}</option>
											</c:when>
											<c:otherwise>
												<option value="${student}" tid="${student.tid}">${student}</option>
											</c:otherwise>
										</c:choose>

									</c:forEach>
								</select>
							</td>
						</c:when>
						<c:when test="${status.index eq 5}">
							<td>
								<select>
									<c:forEach var="major" items="${requestScope.majors}">
										<c:choose>
											<c:when test="${major.major_name==j}">
												<option value="${major.major_name}" selected major_id="${major.major_id}">${major.major_name}</option>
											</c:when>
											<c:otherwise>
												<option value="${major.major_name}" major_id="${major.major_id}">${major.major_name}</option>
											</c:otherwise>
										</c:choose>

									</c:forEach>
								</select>
							</td>
						</c:when>
						<c:otherwise>
							<td>
								<input type="text" class="table_in_input" readonly='trues' value="${j}"/>
							</td>
						</c:otherwise>
					</c:choose>

				</c:forEach>
				<td><input type='checkbox'></td>
			</tr>
		</c:forEach>
	</table>
</body>
<script type="text/javascript" src="/webstuinfo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	(function() {

		var queryCourse = function() {
			$.ajax({
				url : "/webstuinfo/LoginServlet?condition="+$('#input').val(),
				type : 'get',
				dataType : "text",
				success : function(data) {
				    console.log(data);
                    updateTable(data);
                    bindAction();
				}
			});
		};
        bindAction();
		$("#input").bind('change', queryCourse);
		$("#btn").bind('click', queryCourse);
		$('.table_in_input').mousedown(function (event) {
            event = event ? event : window.event;
            var target = event.target ? event.target : event.srcElement;
            $(target).attr('readonly','true');
        })
		function bindAction() {
            $('.table_in_input').dblclick(function (event) {
                event = event ? event : window.event;
                var target = event.target ? event.target : event.srcElement;
                $(target).attr('readonly',false);
            });
            $('.table_in_input').change(function (event) {
                var msg={};
				var thisObj = $(this);
				var currentTr = $(this).parent().parent().children();
                var cid = currentTr.eq(0).children().first().val();
                var cname = currentTr.eq(1).children().first().val();
                var credit = currentTr.eq(3).children().first().val();
                var chour = currentTr.eq(4).children().first().val();
                var max_people = currentTr.eq(6).children().first().val();
                var tid = currentTr.eq(7).children().first().val();
                var majorId = currentTr.eq(8).children().first().val();

                msg.cid=cid;
                msg.credit=credit;
                msg.cname=cname;
                msg.chour=chour;
                msg.max_people=max_people;
                msg.majorId=majorId;
                msg.tid=tid;

                $.ajax({
                    url : "/webstuinfo/AlterServlet",
                    type : 'post',
                    data:msg,
                    dataType : "text",
                    success : function(data) {
                        var oldAttr = thisObj.attr('value');
                        console.log(oldAttr);
                        eval('var o ='+data);
                        if(o.status=='success'){
                            thisObj.val(thisObj.val());
                            alert('修改成功!');
                        }
                        else {
                            thisObj.val(oldAttr);
                            alert('修改失败!');
                        }
                    }
                });
            })
        }

        function updateTable(data) {
            $('.symbol').remove();
            eval("var o=" + data + "");
            for (var i = 0; i < o.length; i++) {
                var tempNode = $("<tr class='symbol' row=''></tr>");
                $(tempNode).attr('row',i);
                for (var j = 0; j < o[i].length; j++) {
                    tempNode.append("<td>" + "<input class='table_in_input' readonly='true' type='text' value='" +o[i][j]+
                        "'>" + "</td>")
                }
                tempNode.append("<td><input type='checkbox'class='check_cid'/></td>");
                $(".course_table").append(tempNode);
            }
        }

		var isManChecked = function () {
            var t=$(':radio');
            t.each(function () {
                if($(this).prop('checked')&&$(this).attr('id')=='boy'){
					return true;
                }
                return false;
            })
        }
        $('#delete_btn').click(function () {
            var target = $('.course_table :checkbox');


            var checkValue = new Array();
          	target.each(function () {
				if($(this).prop('checked')==true){
                    var currentTr = $(this).parent().parent().children();
                    var cid = currentTr.eq(0).children().first().val();
					checkValue.push(cid);
				}
            });
			var urlValue = '?';
			for (var i=0;i<checkValue.length;i++){
			    if(i!=checkValue.length-1){
                    urlValue+='cid='+checkValue[i]+'&';
                }
                else {
                    urlValue+='cid='+checkValue[i];
                }
			}
            var thisObj = $(this);
            var currentTr = $(this).parent().parent().children();
            var cid = currentTr.eq(0).children().first().val();
            $.ajax({
                url : "/webstuinfo/AlterServlet"+urlValue,
                type : 'get',
                dataType : "text",
                success : function(data) {
                    if(data=='success'){
                        target.each(function () {
                            if($(this).prop('checked')==true){
                               $(this).closest('.symbol').remove();
                            }
                        })
                        alert('删除成功!');
					}else {
                        alert('删除失败!');
					}
                }
            });
        })
		var t = {
		}
		/*function editableTable() {
            var inputNode = $('<input type="text" class="table_in_input"/>');
            $('.course_table td')	.click(appendInput);
            function appendInput(event){
                event = event ? event : window.event;
                var target = event.target ? event.target : event.srcElement;
                var content = $(target).html();
                $(inputNode).attr('value',content);
                $(target).html("");
                $(target).append(inputNode);
                $(target).unbind('click',appendInput);
            }
            $('.course_table td  :input[text]').change(function (event) {
                console.log(event);
                event = event ? event : window.event;
                var target = event.target ? event.target : event.srcElement;
                var content = $(target).attr('value');
                console.log(content);
                $(target).remove();
                $(target).parent().val(content);
            });
        }*/
	})();
</script>
</html>